<template>
  <el-card>
    <template #header>
      <div style="float: right">
        <el-button @click="saveButton" type="primary">提 交</el-button>
      </div>
    </template>
  </el-card>
  <el-scrollbar :height="h">
    <ts-card>
      <el-form :model="form" label-position="left">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
            <el-form-item label="名称">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
            <el-form-item label="按钮风格">
              <el-select
                v-model="form.btnType"
                clearable
                placeholder="请选择："
                @change="compoentTypeChange"
              >
                <el-option
                  v-for="item in configData.btnTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item label="链接或路由">
              <el-input v-model="form.url" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item label="路由path">
              <el-input v-model="form.path" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
            <el-form-item label="图标">
              <el-input v-model="form.icon" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
            <el-form-item label="打开方式">
              <el-select
                v-model="form.target"
                clearable
                placeholder="请选择："
                @change="compoentTypeChange"
              >
                <el-option
                  v-for="item in configData.targetList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
            <el-form-item label="标题">
              <el-input v-model="form.title" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
            <el-form-item label="对话框宽度">
              <el-input-number v-model="form.width" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
            <el-form-item label="可选中行数">
              <el-input-number v-model="form.chooseRows" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
            <el-form-item label="对话框是否全屏">
              <el-switch v-model="form.fullscreen" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
            <el-form-item label="大小">
              <el-select v-model="form.size" clearable placeholder="请选择：">
                <el-option
                  v-for="item in configData.sizeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
            <el-form-item label="状态">
              <el-switch
                v-model="form.status"
                active-value="normal"
                inactive-value="disable"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item label="验证表达式">
              <el-input v-model="form.validateExp" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item label="提示语句">
              <el-input v-model="form.promptStatement" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item label="参数模板">
              <el-input v-model="form.paramTemplate" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </ts-card>
    <ts-card header="自定义属性" style="margin-top: 20px">
      <sc-form-table
        v-model="cloneAttributes"
        :addTemplate="attributesTemplate"
        height="300"
      >
        <el-table-column label="key" width="160">
          <template #default="scope">
            <el-input v-model="scope.row.key"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="值">
          <template #default="scope">
            <el-input style="width: 100%" v-model="scope.row.value" />
          </template>
        </el-table-column>
      </sc-form-table>
    </ts-card>
  </el-scrollbar>
</template>
<script setup>
import { ref, defineModel, computed, onMounted } from "vue";
import { getFormConfig } from "./formConfig.js";
import { ElNotification } from "element-plus";
import API from "@/api/model/report.js";
import dataSet from "./dataSet.vue";
import tool from "../utils/tool";
import { deepClone } from "@/utils/arr.js";
const emit = defineEmits(["update",'init']);
const form = defineModel("formData");
const formConfig = ref();
const cloneAttributes = ref([]);
const props = defineProps({
  configData: { type: Array, default: ()=>[] },
  fileName: { type: String, default: "" },
});
const h = computed(() => {
  var elementHeight = document.querySelector(".el-main").offsetHeight;
  return elementHeight + "px";
});
const attributesTemplate = { key: "", value: "" };
onMounted(() => {
  console.log(form.value.cloneAttributes)
    cloneAttributes.value = deepClone(
    form.value.cloneAttributes ? form.value.cloneAttributes : []
  );
});
const compoentTypeChange = () => {
  let type;
  if (
    form.value.component == "inputNumber" ||
    form.value.component == "datePicker"
  ) {
    type = form.value.component + "-" + form.value.pattern;
  } else {
    type = form.value.component;
  }
  formConfig.value = getFormConfig(type, props.configData);
};
const saveButton = async () => {
  form.value.cloneAttributes = tool.convert.arrToMap(cloneAttributes.value);
  let param = {
    fileName: props.fileName,
    bean: form.value,
  };
  let res =await API.saveOrUpdateToolBar.post(param);
  console.log(res)
  if (res.code == 200) {
    ElNotification.success({
      title: "",
      message: "操作成功！",
      duration: 2000,
    });
    emit("update",res.dtl);
    emit('init')
  }
};
</script>
<style lang="less" scoped></style>
